<template>
  <div>
    <div v-if="imgs.length>0" class="box" :style="{width:`${width}px`}">
      <i v-show="mode===1&&showPrev()" :style="{top:`${(height-30)/2}px`,left:`${width/50}px`}" class="fa fa-caret-left lbtn" @click="prev()"></i>
      <i v-show="mode===1&&showNext()" :style="{top:`${(height-30)/2}px`,right:`${width/50}px`}" class="fa fa-caret-right rbtn" @click="next()"></i>
      <ZgImgHolder isBack :height="height" :src="imgs[index].path"/>
      <div v-show="mode===2" class="dots">
        <div class="dot" :class="{curr:index===i}" v-for="(t,i) in imgs" :key="`dot${i}`" @click="index=i"></div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  model: {
    prop: 'modelVal', // 指向props的参数名
    event: 'change'// 事件名称
  },
  props: {
    mode: {
      type: Number,
      default: 2
    },
    width: {
      type: Number,
      default: 320
    },
    height: {
      type: Number,
      default: 200
    },
    imgs: {
      type: Array,
      default: () => {
        return [
          { path: '/upload/none.png' },
          { path: '/upload/head.png' }
        ]
      }
    }
  },
  data () {
    return {
      index: 0
    }
  },
  methods: {
    showPrev () {
      return this.index > 0
    },
    showNext () {
      return this.index < this.imgs.length - 1
    },
    prev () {
      this.index -= 1
    },
    next () {
      this.index += 1
    }
  }
}
</script>

<style lang="less" scoped>
.box{
  position:relative;
  .lbtn,.rbtn{
    position:absolute;
    font-size:24px;
    padding:3px 9px;
    width:30px;
    height:30px;
    border-radius:50%;
    background:#999999a2;
    color:#333;
    &:hover{
      cursor:pointer;
      background:#fff;
    }
  }
  .rbtn{
    padding:3px 12px;
  }
  .dots{
    position:absolute;
    left:0;bottom:0;
    display:flex;
    justify-content: space-around;
    align-items: center;
    height:40px;
    width:100%;
    background:#000000a6;
    padding:0 40%;
    .dot{
      width:12px;height:12px;
      border-radius:50%;
      background:#999;
      &:hover,&.curr{
        cursor:pointer;
        background:#fff;
      }
    }
  }
}
</style>
